<template>
  <div class="c_good_box">
    <div class="good_top">
      <el-input
        v-model="searchVal"
        placeholder="商品名称"
        style="width: 200px"
        size="small"
      ></el-input>
      <el-button type="primary" size="small" @click="searchGoodFn"
        >查询</el-button
      >
      <el-button type="primary" size="small" @click="gotoAddgood"
        >添加</el-button
      >
      <el-button type="primary" size="small" @click="resetFn">重置</el-button>
    </div>
    <!-- test上传 -->
    <!-- <div class="file_test">
      <el-upload
        class="avatar-uploader"
        action="http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        name="good_pic"
        :headers="headers"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <p>===========================================================</p>
      <el-upload
        class="avatar-uploader"
        action
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        name="good_pic"
        :http-request="uploadPicFn"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </div> -->
    <div class="good_bottom">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="售价" prop="retail_price"> </el-table-column>
        <el-table-column label="库存" prop="goods_number"> </el-table-column>
        <el-table-column label="新品"
          ><template slot-scope="scope">
            {{ scope.row.is_hot ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="人气">
          <template slot-scope="scope">
            {{ scope.row.is_new ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="上架">
          <template slot-scope="scope">
            {{ scope.row.is_delete ? "是" : "否" }}
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="sort_order"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>
 
<script>
import { GoodDataApi, uploadPicApi } from "../../request/api";
export default {
  data() {
    return {
      searchVal: "",
      // 表格渲染的数据
      tableData: [],
      // 当前页
      currentPage: 1,
      // 总页数
      totalPages: 0,
      // 总条数
      count: 0,
      // 每页数量
      pageSize: 10,
      // 图片
      imageUrl: "",
      imageUrl1: "",
      //
      headers: {
        "X-Nideshop-Token": localStorage.getItem("token"),
      },
    };
  },
  created() {
    // 获取商品数据
    GoodDataApi({
      page: this.currentPage,
      size: this.pageSize,
    }).then((res) => {
      console.log(res);
      if (res.errno === 0) {
        this.tableData = res.data.data;
        this.count = res.data.count;
        this.totalPages = res.data.totalPages;
      }
    });
  },
  methods: {
    // 添加商品
    gotoAddgood() {
      this.$router.push("/addgood");
    },
    // 查询商品
    searchGoodFn() {
      GoodDataApi({
        page: this.currentPage,
        name: this.searchVal,
        size: this.pageSize,
      }).then((res) => {
        if (res.errno === 0) {
          this.tableData = res.data.data;
          this.count = res.data.count;
          this.totalPages = res.data.totalPages;
        }
      });
    },
    // 重置
    resetFn() {
      this.searchVal = "";
      // 刷新页面
      // this.$router.go(0);
    },
    uploadPicFn(data) {
      console.log(data);
      let form = new FormData();
      form.append("good_pic", data.file);
      uploadPicApi(form).then((res) => {
        if (res.errno == 0) {
          this.imageUrl1 = res.data.fileUrl;
        }
      });
    },
    handleAvatarSuccess(res) {
      console.log(res);
    },
    beforeAvatarUpload() {},

    // 切换显示条数
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
      GoodDataApi({
        page: this.currentPage,
        size: val,
      }).then((res) => {
        if (res.errno === 0) {
          this.tableData = res.data.data;
          this.count = res.data.count;
          this.totalPages = res.data.totalPages;
        }
      });
    },
    // 切换当前页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
      GoodDataApi({
        page: this.currentPage,
        size: this.pageSize,
      }).then((res) => {
        if (res.errno === 0) {
          this.tableData = res.data.data;
          this.count = res.data.count;
          this.totalPages = res.data.totalPages;
        }
      });
    },
    // 编辑
    handleEdit(a, b) {
      console.log(a, b);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.c_good_box {
  background-color: #fff;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  .good_top {
    height: 51px;
    .el-input {
      margin-right: 10px;
    }
  }
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>